import React, {useEffect, useState} from 'react'
import {Descriptions, PageHeader} from "antd";
import axios from"axios"
import moment from"moment"  //格式化时间戳
export default function NewsPreview (props){
    const [newsInfo,setNewsInfo]=useState(null)//新闻的数据
    let id=props.match.params.id;//因为NewsPreview包裹在路由中，所以可以获取路由对象。 获取动态路由的参数  props.match.params
    useEffect(()=>{
       axios.get(`/news/${id}?_expand=category&_expand=role`).then(res=>{
           setNewsInfo(res.data)
           console.log(res.data)
       })
    },[id])
    const auditList = ["未审核", '审核中', '已通过', '未通过']
    const publishList = ["未发布", '待发布', '已上线', '已下线']
    const colorList=["black","orange","green","red"]
    return(
        <div className="site-page-header-ghost-wrapper">
            {
                newsInfo&&
                <div>
                <PageHeader
                    ghost={false}
                    onBack={() => window.history.back()}
                    title={newsInfo.title}
                    subTitle={newsInfo.category.title}
                >
                    <Descriptions size="small" column={3}>
                        <Descriptions.Item label="创建者">{newsInfo.author}</Descriptions.Item>
                        <Descriptions.Item label="创建时间">{moment(newsInfo.createTime).format("YYYY/MM/DD HH:mm:SS")}</Descriptions.Item>
                        <Descriptions.Item label="发布时间">{newsInfo.publishTime?moment(newsInfo.publishTime).format("YYYY-MM-DD HH:mm:SS"):"-"}</Descriptions.Item>
                        <Descriptions.Item label="区域">{newsInfo.region}</Descriptions.Item>
                        <Descriptions.Item label="审核状态" ><span style={{ color: colorList[newsInfo.auditState] }}>{auditList[newsInfo.auditState]}</span></Descriptions.Item>
                        <Descriptions.Item label="发布状态" ><span style={{ color: colorList[newsInfo.publishState] }}>{publishList[newsInfo.publishState]}</span></Descriptions.Item>
                        <Descriptions.Item label="访问数量">{newsInfo.view}</Descriptions.Item>
                        <Descriptions.Item label="点赞数量">{newsInfo.star}</Descriptions.Item>
                        <Descriptions.Item label="评论数量">0</Descriptions.Item>
                    </Descriptions>
                </PageHeader>
                        <div dangerouslySetInnerHTML={{
                            //dangerouslySetInnerHTML  将字符串转化为html
                        __html:newsInfo.content
                    }} style={{
                        margin:"0 24px",
                        border:"1px solid gray"
                    }}>
                        </div>
                </div>
            }

        </div>
    )
}
